<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 09:06:50
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-08 15:11:11
 * @FilePath: \company-world\src\views\homepage\index.vue
 * @Description: 增加/修改新闻
-->
<template>
  <el-form ref="ruleFormRef" :model="fomData" :rules="rules" status-icon class="form-option">
    <h4>作者名称</h4>
    <el-form-item prop="news_author">
      <el-input class="form-input" v-model="fomData.news_author"></el-input>
    </el-form-item>
    <!-- 接受人 -->
    <h4>图片</h4>
    <el-form-item prop="news_picture">
      <!-- <FileUpload
        ref="modifyAvatar"
        :files="state.preloadAvatar"
        :multiple="false"
        :fileTypeList="['bmp', 'jpg', 'png', 'gif', 'jpeg', 'cdr', 'psd']"
        @extra-files="onFileUpload"
        :fileAccept="'image/*'"
      ></FileUpload> -->
      <upload action="/upload" :cicle="true" :width="300" :height="300" :on-success="onSuccess">
        <img
          style="max-width: 100%; max-height: 100%"
          v-if="fomData.news_picture"
          :src="fomData.news_picture"
          class="avatar"
        />
        <div
          v-else
          style="
            border: 1px dashed #ff0000;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
          "
        >
          <i class="iconfont icona-xinzengyuanjiao" style="font-size: 26px; color: #"></i>
        </div>
      </upload>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, watch, computed, defineExpose, reactive } from 'vue'
import { ElMessage, FormRules } from 'element-plus'
import { getPageList } from '@/apis/system/system'
import { getDepartmentList } from '@/apis/system/department'
import { ItagsData, Issues } from '@/views/issues/config/issues'
import { getTagsList } from '@/apis/issues/issues-tags'
import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'
import upload from '@/components/Upload'
import { Itype } from '@/type/index'
const props = defineProps({
  form: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const fomData = ref()
watch(
  () => props.form,
  (newVal) => {
    fomData.value = newVal
  },
  { immediate: true }
)
const baseUrl = 'https://dwh_api.bimcc.net'
const state = reactive({
  preloadAvatar: [],
  loading: false
})
// const issueStore = store()
// const { userList } = storeToRefs(issueStore)
const rules = reactive<FormRules>({
  type: [{ required: true, message: '公告类型不能为空', trigger: 'blur' }],
  data_title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  data_content: [{ required: true, message: '富文本内容不能为空', trigger: 'blur' }],
  recipient: [{ required: true, message: '接收人不能为空', trigger: 'blur' }]
})
/**
 * @desc:对象转数组
 */
// let userLists: Itype = userList.value
// let arrs: Itype = ref([])
// Object.keys(userLists).forEach(function (key: string) {
//   if (arrs.value && arrs.length) {
//     arrs.value.push({
//       value: key,
//       label: userLists[key]
//     })
//   }
// })
/**
 * @desc: 增加标签
 */
const emit = defineEmits(['send-tagsDialog'])
const addTags = () => {
  emit('send-tagsDialog')
}
/**
 * @desc: 拼接图片路径
 */
const API_BASE_URL = 'http://localhost:3008'
const onSuccess = (res: any) => {
  //拼装图片路径赋值给表单
  fomData.value.news_picture = API_BASE_URL + '/' + res.path.slice(0, 7) + '/' + res.path.slice(8)
}
/**
 * 获取tags数据
 */
// const tagsListData = ref<ItagsData[]>()
// const getData = () => {
//   let params = {}
//   getTagsList(params)
//     .then((res) => {
//       if (res.data && res.code !== 200) return
//       tagsListData.value = res.data.data
//     })
//     .catch(() => {
//       ElMessage('服务器内部错误')
//     })
// }
// getData()
/**
 * @desc:上传头像图片
 */
const onFileUpload = (data: Itype) => {
  if (!data || !data.length) return
  const file = data[data.length - 1]
  props.form.news_picture = file?.url
  state.preloadAvatar = []
}
</script>

<style lang="less" scoped>
.right-content {
  overflow-y: auto;
}
.form-option {
  height: auto !important;
  background-color: #fff !important;
}
h4 {
  padding-bottom: 20px;
}
.block {
  :deep(.el-range-editor.el-input__wrapper) {
    width: 92%;
  }
}
</style>
